<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>院区列表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="/stylesheets/common.css">
    <style>
        .header {
            background-color: rgba(108, 200, 239, 0.755);
            border-radius: 10px;
        }

        h3,
        p {
            margin-bottom: 0;
        }
    </style>
</head>

<body>
    <h4 class="text-center mt-3" style="color: black;">院区列表</h4>
    <div class="container">
        <div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
            <h5>智能导诊</h5>
            <p>依据您的发病部位和症状为您导诊科室</p>
        </div>
        <div class="branch-list mt-3">
            <div class="header flex-column d-flex text-start p-3 branch-item">
                <p style="font-weight: bold;color: rgb(49, 74, 218);" class="p-1">测试分院</p>
                <p class="p-1">测试地址。。。。。。。</p>
            </div>
        </div>
    </div>
    <script>
        select()
        $('.branch-list').on('click', '.branch-item', function () {
            localStorage.setItem('fyid', Number($(this).attr('fyid')))
            location.href = "/department.html";
        })







        // 查找所有的院区列表
        function select() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/branch/select',
                success: function (data) {
                    console.log(data)
                    render(data.data)
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }
        function render(data) {
            let str = ''
            data.forEach((item, index) => {
                str += ` 
                <div class="header flex-column d-flex text-start p-3 mb-2 branch-item" fyid="${item.id}">
                <p style="font-weight: bold;color: rgb(49, 74, 218);" class="p-1">${item.name}</p>
                <p class="p-1">${item.address}</p>
                </div>
                `;
            })
            $('.branch-list').html(str)
        }


    </script>
</body>

</html>